<!-- 创建模型 -->
<template>
  <div>
    <div class="header">
      <a-icon-font class="icon" type="iconqiehuantufenxibeifen2" />
      <span>模型训练</span>
      <div class="divider"></div>
      <div class="tab">
        <span class="m-span">我的模型</span>
        <div class="bottom-line"></div>
      </div>
    </div>
    <div class="model-trainning">
      <div class="bg">
        <div class="navg-btns">
          <div class="return-btn" @click="backList">
            <a-icon type="left" />
            返回
          </div>
          <div class="divider2"></div>
          <a-breadcrumb class="bread">
            <span slot="separator">|</span>
            <a-breadcrumb-item>
              <a @click="current = 0">创建模型</a
              >{{
                current !== 0
                  ? ` [${modelData && modelData.modelType}-${
                      modelData && modelData.algorithm
                    }]`
                  : ''
              }}</a-breadcrumb-item
            >
          </a-breadcrumb>
        </div>
        <a-divider style="margin: 0;"></a-divider>
        <div class="main-content" :class="current === 0 ? 'space' : 'space1'">
          <a-steps :current="current" :class="current !== 0 ? 'space' : ''">
            <a-step
              v-for="item in steps"
              :key="'step' + item.title"
              :title="item.title"
            />
          </a-steps>
          <a-spin :spinning="loading" size="large" tip="Loading...">
            <div class="steps-content">
              <!--创建模型-->
              <a-form
                v-if="current === 0"
                :form="modelData"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 8 }"
              >
                <a-form-item label="模型类别：" required>
                  <a-select
                    v-model="modelData.algorithm"
                    :disabled="loading"
                    placeholder="请选择"
                    class="model-radius"
                    @change="handleChange"
                  >
                    <a-select-opt-group
                      v-for="item in modelTypeList"
                      :key="'group' + item.groupName"
                      :label="item.groupName"
                    >
                      <a-select-option
                        v-for="option in item.options"
                        :key="'option' + option.key"
                        :value="option.key"
                      >
                        <a-tooltip placement="top">
                          <template slot="title">
                            <span>{{ option.value }}</span>
                          </template>
                          <span>{{ option.value }}</span>
                        </a-tooltip>
                      </a-select-option>
                    </a-select-opt-group>
                  </a-select>
                </a-form-item>
                <a-form-item label="模型名称：" required>
                  <a-input
                    v-model="modelData.name"
                    :max-length="20"
                    :disabled="loading"
                    placeholder="请输入"
                    :allow-clear="true"
                    class="model-radius"
                  >
                  </a-input>
                </a-form-item>
                <a-form-item label="功能描述：">
                  <a-textarea
                    v-model="modelData.modelDesc"
                    :disabled="loading"
                    placeholder="请输入"
                    :max-length="300"
                    :rows="6"
                    allow-clear
                    @change="textAreaChange"
                  />
                </a-form-item>
              </a-form>

              <!--配置训练参数-->
              <div v-else-if="current === 1" class="settings">
                <div class="m_title">
                  <div class="divider"></div>
                  <strong>添加数据</strong>
                </div>
                <span style="padding-left: 12px;">添加训练数据：</span>
                <a-select
                  v-model="dataFm.source"
                  style="width: 500px;"
                  :disabled="loading"
                  placeholder="请选择"
                  class="model-radius"
                  @change="sourceChange"
                >
                  <a-select-opt-group
                    v-for="(item, index) in dataSets"
                    :key="'dataSets' + index"
                    :label="`${item.userName}的数据`"
                  >
                    <a-select-option
                      v-for="(source, index2) in item.dataset"
                      :key="'source' + index2"
                      :value="source.tableName"
                    >
                      {{ source.name }}
                    </a-select-option>
                  </a-select-opt-group>
                </a-select>
                <br /><br />
                <div class="m_title">
                  <div class="divider"></div>
                  <strong>配置参数</strong>
                </div>
                <div class="form-content">
                  <a-form
                    :form="dataFm"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    label-align="left"
                  >
                    <a-form-item v-if="columns.length > 0">
                      <a-tooltip slot="label" placement="bottomRight">
                        <template slot="title">
                          <span>{{
                            limitRules[modelData.modelType].feature
                          }}</span>
                        </template>
                        <span>
                          <a-icon-font
                            type="iconinfo-cirlce-o"
                            style="font-size: 16px; margin-right: 5px;"
                          ></a-icon-font
                          >特征列
                        </span>
                      </a-tooltip>
                      <div class="m_checkbox">
                        <a-checkbox
                          :indeterminate="indeterminate"
                          style="padding-left: 4px;"
                          :disabled="loading"
                          :checked="checkAll"
                          @change="onCheckAllChange"
                        >
                          全选
                        </a-checkbox>
                        <a-checkbox-group
                          v-model="checkedList"
                          style="width: 100%;"
                          :disabled="loading"
                          @change="onChange(checkedList, plainOptions)"
                        >
                          <a-row>
                            <a-col
                              v-for="(item, index) in columns"
                              :key="'features' + index"
                              :span="4"
                              style="padding: 4px;"
                            >
                              <a-checkbox
                                :value="
                                  item.name === label_col ? false : item.name
                                "
                                :disabled="item.name === label_col"
                                class="checkbox"
                              >
                                <a-tooltip>
                                  <template slot="title"
                                    >{{ item.name }}
                                  </template>
                                  <div class="text-ellipsis">
                                    {{ item.name }}
                                  </div>
                                </a-tooltip>
                              </a-checkbox>
                            </a-col>
                          </a-row>
                        </a-checkbox-group>
                      </div>
                      <div
                        class="table-content four-scroll-y"
                        style="overflow: auto;"
                      >
                        <!-- <dataset-preview-table
                          v-if="dataFm.source"
                          :head="heads"
                          :data="souceData"
                          height="500"
                          data-type="table"
                        /> -->
                        <table
                          v-if="dataFm.source"
                          :loading="featureTableLoading"
                          class="m_table"
                        >
                          <tr>
                            <th
                              v-for="title in heads"
                              :key="'heads' + title.name"
                              scope="row"
                            >
                              <a-tooltip placement="top">
                                <template slot="title">
                                  <span>{{
                                    `${title.name}（${title.desc}）`
                                  }}</span>
                                </template>
                                <a-checkbox
                                  class="text-ellipsis"
                                  :checked="
                                    title.name === label_col
                                      ? false
                                      : checkedList.indexOf(title.name) > -1
                                  "
                                  :disabled="title.name === label_col"
                                  @change="featureCheck(title.name)"
                                >
                                  {{ `${title.name}（${title.desc}）` }}
                                </a-checkbox>
                              </a-tooltip>
                            </th>
                          </tr>
                          <tr
                            v-for="(item, index) in souceData"
                            :key="'souceData' + index"
                          >
                            <td v-for="title in heads" :key="'td' + title.name">
                              <a-tooltip
                                placement="topLeft"
                                :overlay-style="{ maxWidth: '600px' }"
                              >
                                <template slot="title">
                                  <span>{{ item[title.name] }}</span>
                                </template>
                                <span style="width: 200px;">{{
                                  item[title.name]
                                }}</span>
                              </a-tooltip>
                            </td>
                          </tr>
                        </table>
                        <!-- <a-table
                          v-else
                          :columns="[]"
                          :data-source="[]"
                          bordered
                          :loading="featureTableLoading"
                          style="border-top: 1px solid #e8e8e8; height: 100%;"
                        >
                        </a-table> -->
                      </div>
                    </a-form-item>
                    <a-form-item
                      v-if="
                        (modelData.algorithm === 'LR' ||
                          modelData.algorithm === 'DTC' ||
                          modelData.algorithm === 'AUTOR' ||
                          modelData.algorithm === 'AUTOC') &&
                        columns.length > 0
                      "
                    >
                      <a-tooltip slot="label" placement="bottomRight">
                        <template slot="title">
                          <span>{{
                            limitRules[modelData.modelType].label
                          }}</span>
                        </template>
                        <span>
                          <a-icon-font
                            type="iconinfo-cirlce-o"
                            style="font-size: 16px; margin-right: 5px;"
                          ></a-icon-font
                          >目标列
                        </span>
                      </a-tooltip>
                      <a-radio-group
                        v-model="label_col"
                        :disabled="loading"
                        class="m_radiobox"
                      >
                        <a-row>
                          <a-col
                            v-for="(item, index) in columns"
                            :key="'LR' + index"
                            :span="4"
                            style="padding: 4px;"
                          >
                            <a-radio
                              :value="item.name"
                              :disabled="checkedList.includes(item.name)"
                              class="radio"
                            >
                              <a-tooltip>
                                <template slot="title"
                                  >{{ item.name }}
                                </template>
                                <div class="text-ellipsis">
                                  {{ item.name }}
                                </div>
                              </a-tooltip>
                            </a-radio>
                          </a-col>
                        </a-row>
                      </a-radio-group>
                    </a-form-item>
                    <div v-if="modelData.algorithm === 'LR'">
                      <a-form-item label="正则参数：">
                        <a-input-number
                          v-model="reg_param"
                          style="width: 500px;"
                          :disabled="loading"
                          default-value="0"
                          placeholder="请输入"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          @change="onValueChange('reg_param', reg_param)"
                        />
                      </a-form-item>
                      <a-form-item label="最大迭代数：">
                        <a-input-number
                          v-model="max_iter"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="5"
                          :min="0"
                          :max="20"
                          @change="onValueChange('max_iter', max_iter)"
                        />
                      </a-form-item>
                    </div>
                    <div v-else-if="modelData.algorithm === 'DTC'">
                      <a-form-item label="拆分比例：">
                        训练集
                        <a-input-number
                          v-model="split_rate1"
                          :disabled="loading"
                          style="margin: 0 10px; width: 80px;"
                          placeholder="请输入"
                          :min="0.5"
                          :max="1"
                          :step="0.05"
                          :precision="2"
                          @blur="spiltRateChange(1)"
                        />
                        测试集
                        <a-input-number
                          v-model="split_rate2"
                          :disabled="loading"
                          style="margin: 0 10px; width: 80px;"
                          placeholder="请输入"
                          :min="0"
                          :max="0.5"
                          :step="0.05"
                          :precision="2"
                          @blur="spiltRateChange(2)"
                        />
                      </a-form-item>
                      <a-form-item label="树的最大深度：">
                        <a-input-number
                          v-model="max_depth"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="5"
                          :min="0"
                          :max="20"
                        />
                      </a-form-item>
                    </div>
                    <div v-else-if="modelData.algorithm === 'KM'">
                      <!-- <a-form-item label="聚类维度：">
                          <a-input-number style="width: 500px;" placeholder="请输入" default-value="2" :min="2" :max="20"/>
                        </a-form-item> -->
                      <a-form-item label="聚类维度(k)：">
                        <a-input-number
                          v-model="k"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="2"
                          :min="2"
                          :max="20"
                        />
                      </a-form-item>
                      <a-form-item label="最大迭代数：">
                        <a-input-number
                          v-model="max_iter"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="20"
                          :min="0"
                          :max="20"
                        />
                      </a-form-item>
                      <a-form-item label="距离函数：">
                        <a-select
                          v-model="model_type"
                          :disabled="loading"
                          placeholder="请选择"
                          style="width: 500px;"
                        >
                          <a-select-option value="euclidean"
                            >euclidean
                          </a-select-option>
                          <a-select-option value="cosine"
                            >cosine
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </div>
                    <div v-else-if="modelData.algorithm === 'PCA'">
                      <a-form-item label="降维维度：">
                        <a-input-number
                          v-model="k"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="1"
                          :min="1"
                          :max="10"
                        />
                      </a-form-item>
                    </div>
                    <div v-else-if="modelData.algorithm === 'AUTOR'">
                      <a-form-item label="拆分比例：">
                        训练集
                        <a-input-number
                          v-model="split_rate1"
                          :disabled="loading"
                          style="margin: 0 10px; width: 80px;"
                          placeholder="请输入"
                          :min="0.5"
                          :max="1"
                          :step="0.05"
                          :precision="2"
                          @blur="spiltRateChange(1)"
                        />
                        测试集
                        <a-input-number
                          v-model="split_rate2"
                          :disabled="loading"
                          style="margin: 0 10px; width: 80px;"
                          placeholder="请输入"
                          :min="0"
                          :max="0.5"
                          :step="0.05"
                          :precision="2"
                          @blur="spiltRateChange(2)"
                        />
                      </a-form-item>
                      <a-form-item label="最大训练时长：">
                        <a-input-number
                          v-model="timeout"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="60"
                          :min="30"
                          :max="3600"
                        />
                        s
                      </a-form-item>
                      <a-form-item label="仅采纳以下模型：">
                        <div class="m_checkbox">
                          <a-checkbox
                            :indeterminate="indeterminate2"
                            style="padding-left: 4px;"
                            :disabled="loading"
                            :checked="checkAll2"
                            @change="onCheckAllChange2"
                          >
                            全选
                          </a-checkbox>
                          <a-checkbox-group
                            v-model="include"
                            style="width: 100%;"
                            :disabled="loading"
                            @change="onChange(include, regressionArray, 2)"
                          >
                            <a-row>
                              <a-col
                                v-for="(item, index) in regressionArray"
                                :key="'regression' + index"
                                :span="4"
                                style="padding: 4px;"
                              >
                                <a-checkbox :value="item" class="checkbox">
                                  <a-tooltip>
                                    <template slot="title"
                                      >{{ item }}
                                    </template>
                                    <div class="text-ellipsis">
                                      <a
                                        :href="regressionIntro[item]"
                                        target="_blank"
                                        style="color: rgba(0, 0, 0, 0.65);"
                                        >{{ item }}</a
                                      >
                                    </div>
                                  </a-tooltip>
                                </a-checkbox>
                              </a-col>
                            </a-row>
                          </a-checkbox-group>
                        </div>
                      </a-form-item>
                    </div>
                    <div v-else-if="modelData.algorithm === 'AUTOC'">
                      <a-form-item label="拆分比例：">
                        训练集
                        <a-input-number
                          v-model="split_rate1"
                          :disabled="loading"
                          style="margin: 0 10px; width: 80px;"
                          placeholder="请输入"
                          :min="0.5"
                          :max="1"
                          :step="0.05"
                          :precision="2"
                          @blur="spiltRateChange(1)"
                        />
                        测试集
                        <a-input-number
                          v-model="split_rate2"
                          :disabled="loading"
                          style="margin: 0 10px; width: 80px;"
                          placeholder="请输入"
                          :min="0"
                          :max="0.5"
                          :step="0.05"
                          :precision="2"
                          @blur="spiltRateChange(2)"
                        />
                      </a-form-item>
                      <a-form-item label="最大训练时长：">
                        <a-input-number
                          v-model="timeout"
                          :disabled="loading"
                          style="width: 500px;"
                          placeholder="请输入"
                          default-value="60"
                          :min="30"
                          :max="3600"
                        />
                        s
                      </a-form-item>
                      <a-form-item label="仅采纳以下模型：">
                        <div class="m_checkbox">
                          <a-checkbox
                            :indeterminate="indeterminate2"
                            style="padding-left: 4px;"
                            :disabled="loading"
                            :checked="checkAll2"
                            @change="onCheckAllChange3"
                          >
                            全选
                          </a-checkbox>
                          <a-checkbox-group
                            v-model="include"
                            style="width: 100%;"
                            :disabled="loading"
                            @change="onChange(include, classificationArray, 2)"
                          >
                            <a-row>
                              <a-col
                                v-for="(item, index) in classificationArray"
                                :key="'regression' + index"
                                :span="4"
                                style="padding: 4px;"
                              >
                                <a-checkbox :value="item" class="checkbox">
                                  <a-tooltip>
                                    <template slot="title"
                                      >{{ item }}
                                    </template>
                                    <div class="text-ellipsis">
                                      <a
                                        :href="classIntro[item]"
                                        target="_blank"
                                        style="color: rgba(0, 0, 0, 0.65);"
                                        >{{ item }}</a
                                      >
                                    </div>
                                  </a-tooltip>
                                </a-checkbox>
                              </a-col>
                            </a-row>
                          </a-checkbox-group>
                        </div>
                      </a-form-item>
                    </div>
                  </a-form>
                </div>
              </div>

              <!--模型训练 训练完成/未训练-->
              <div v-else class="trainning">
                <div class="title">
                  <strong>{{
                    `${modelData.name} [${modelData && modelData.modelType}-${
                      modelData && modelData.algorithm
                    }]`
                  }}</strong>
                </div>
                <a-row class="row">
                  <a-col :span="8"
                    >数据规模：{{
                      modelData.data ? `${modelData.data.rowNum}行` : '-'
                    }}
                  </a-col>
                  <a-col :span="8"
                    >字段数：{{ modelData.data ? modelData.data.colNum : '-' }}
                  </a-col>
                  <a-col :span="8"
                    >训练时长：{{
                      modelData.runTime ? `${modelData.runTime}s` : '-'
                    }}
                  </a-col>
                </a-row>
                <a-row class="row">
                  <a-col :span="8"
                    >创建时间：{{
                      modelData.gmtCreate ? modelData.gmtCreate : '-'
                    }}
                  </a-col>
                  <!-- <a-col :span="6">创建时间：{{modelData.gmtCreate}}</a-col> -->
                  <a-col :span="8"
                    >大小：{{
                      modelData.data && modelData.data.sourceSize
                        ? modelData.data.sourceSize
                        : '-'
                    }}
                  </a-col>
                  <a-col :span="8" @click="viewConfig"
                    >配置训练：<a>查看</a></a-col
                  >
                </a-row>

                <a-radio-group
                  v-model="radio"
                  class="radio"
                  default-value="a"
                  button-style="solid"
                >
                  <a-radio-button value="a">评估报告</a-radio-button>
                  <a-radio-button
                    value="b"
                    :disabled="!isFinished"
                    @click="queryOutputById"
                    >输出结果
                  </a-radio-button>
                </a-radio-group>

                <div class="content">
                  <model-access
                    v-if="radio === 'a'"
                    :project-id="projectId"
                    :model-data="modelData"
                    :model-id="modelData.id"
                    :algorithm="modelData.algorithm"
                    :is-report="false"
                    @train-status="trainStatusChanged"
                  ></model-access>
                  <div v-else>
                    <div class="m_title">
                      <div class="divider"></div>
                      <strong>输出结果</strong>
                    </div>
                    <a-table
                      :loading="tableLoading"
                      :columns="outputColumns"
                      :data-source="outputData"
                    ></a-table>
                  </div>
                </div>
              </div>
            </div>
          </a-spin>
          <div
            class="steps-action btn-center"
            :style="{
              padding:
                current === 0 ? '0 33.3%' : current === 1 ? '0 10.6%' : '',
            }"
          >
            <div v-if="current === 0">
              <a-button @click="backList">取消</a-button>
              <a-button class="btn-left" type="primary" @click="next"
                >下一步
              </a-button>
            </div>

            <div v-else-if="current === 1">
              <a-button @click="prev">上一步</a-button>
              <a-button class="btn-left" :loading="loading" @click="saveModel"
                >保存</a-button
              >
              <a-button
                type="primary"
                :loading="loading"
                class="btn-left"
                @click="startTrain"
                >开始训练
              </a-button>
            </div>
            <div v-else class="btn-center" style="margin-top: 40px;">
              <a-button
                v-if="
                  modelData.status !== 'FINISHED' &&
                  modelData.status !== 'FAILED'
                "
                @click="cancelTrain"
                >取消训练
              </a-button>
              <a-button
                v-else-if="
                  modelData.status === 'FAILED' ||
                  modelData.status === 'FINISHED'
                "
                @click="reStartTrain"
                >再次训练
              </a-button>
              <a-button
                v-if="modelData.status === 'FINISHED'"
                class="btn-left"
                @click="exportData"
                >导出模型
              </a-button>
              <a-button type="primary" class="btn-left" @click="backList"
                >确定
              </a-button>
            </div>
          </div>
        </div>

        <!-- 导出框 -->
        <a-modal
          :visible="exportVisible"
          :ok-text="'保存'"
          cancel-text="取消"
          centered
          :width="458"
          title="导出模型"
          @cancel.stop="
            exportVisible = false
            modelForm = {}
          "
          @ok="handleConfirm"
        >
          <div>
            <a-form
              :form="modelForm"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-form-item label="导出至：">
                <a-input
                  v-if="collectionList.length < 1"
                  disabled
                  placeholder="我的模型"
                ></a-input>
                <a-select
                  v-else
                  ref="select"
                  v-model="modelForm.id"
                  class="model-radius"
                  placeholder="请选择"
                  allow-clear
                >
                  <a-select-option
                    v-for="(item, index) in collectionList"
                    :key="'collectionList' + index"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="模型名称：">
                <!-- <a-input
                  ref="classInput"
                  v-model="modelForm.name"
                  default-value="未命名"
                  :allow-clear="true"
                  class="model-radius"
                >
                </a-input> -->
                <a-input
                  ref="classInput"
                  v-model="modelData.name"
                  disabled
                  default-value="未命名"
                  :allow-clear="true"
                  class="model-radius"
                >
                </a-input>
              </a-form-item>
              <a-form-item label="功能描述：">
                <a-textarea
                  v-model="modelForm.modelDesc"
                  placeholder="创建时的功能性描述"
                  :rows="6"
                />
              </a-form-item>
            </a-form>
          </div>
        </a-modal>

        <div class="close" @click="closeGraphPanel">
          <a-icon title="关闭" type="close" />
        </div>
      </div>
    </div>
    <!-- <div class="ant-modal-mask" style="z-index: 998;"></div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ModelAccess from '@/components/studio/data/model/ModelAccess.vue'
import DatasetPreviewTable from '@/components/data/DatasetPreviewTable.vue'
import {
  createModel,
  queryModelById,
  updateModel,
  querySource,
  trainModel,
  killTraining,
  exportToFolder,
  queryOutputById,
  // saveOutputToDataSource
} from '@/api/model'
import { queryProjectDataset } from '@/api/data-list'
import { allOperatorList } from '@/api/operator-list'
import { isNumber } from 'lodash'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: { ModelAccess, DatasetPreviewTable },
})
export default class ModelTrainning extends Vue {
  // @Prop({ type: Number, default: 0 }) projectId!: number
  private projectId: number = 0 // 项目 Id
  public modelData: any = {}
  public modelId: number = 0
  public current: number = 0
  public steps = [
    {
      title: '创建模型',
      content: 'First-content',
    },
    {
      title: '训练配置',
      content: 'Second-content',
    },
    {
      title: '模型训练',
      content: 'Last-content',
    },
  ]
  public userDataList: any = []
  public heads: any = []
  public columns: any = []
  public souceData = []
  public plainOptions: any = []
  private minLength = document.body.clientWidth - 200
  // public contentHeight = document.body.clientHeight - 86
  public labelCol = {
    xs: { span: 24 },
    sm: { span: 2 },
  }
  public wrapperCol = {
    xs: { span: 24 },
    sm: { span: 18 },
  }
  public loading: boolean = false
  public dataSets: any = []
  public dataFm: any = {}
  public indexTable: any = {}
  public indeterminate: boolean = false
  public indeterminate2: boolean = false
  public checkAll: boolean = false
  public checkAll2: boolean = false
  public exportVisible: boolean = false
  public modelForm: any = {}
  public checkedList: any = [] // 特征列
  public label_col: any = '' // 目标列
  public split_rate1: any = 0.8
  public split_rate2: any = 0.2
  public max_iter: any = 20
  public model_type: any = 'euclidean'
  public reg_param: any = 0
  public k: any = 1
  public timeout: any = 60
  public include: any = []
  public max_depth: any = 5
  public radio: any = 'a'
  public tableLoading: boolean = false
  public featureTableLoading: boolean = false
  public outputColumns: any = []
  public outputData: any = []
  public collectionList: any = []
  public sourceCount: any = 0 // 样本行数
  public isFinished: boolean = false
  public regressionArray: any = [
    'adaboost',
    'ard_regression',
    'decision_tree',
    'extra_trees',
    'gaussian_process',
    'gradient_boosting',
    'k_nearest_neighbors',
    'liblinear_svr',
    'libsvm_svr',
    'mlp',
    'random_forest',
    'sgd',
  ]
  public classificationArray: any = [
    'adaboost',
    'bernoulli_nb',
    'decision_tree',
    'extra_trees',
    'gaussian_nb',
    'gradient_boosting',
    'k_nearest_neighbors',
    'lda',
    'liblinear_svc',
    'libsvm_svc',
    'mlp',
    'multinomial_nb',
    'passive_aggressive',
    'qda',
    'random_forest',
    'sgd',
  ]
  public limitRules: any = {
    回归: {
      feature:
        '要求字段类型为数值型(smallint, bigint, binary, integer, double, numeric)或字符串型(varchar, char, text)',
      label:
        '要求字段类型为数值型(smallint, bigint, binary, integer, double, numeric)',
    },
    分类: {
      feature:
        '要求字段类型为数值型(smallint, bigint, binary, integer, double, numeric)或字符串型(varchar, char, text)',
      label:
        '要求字段类型为数值型(smallint, bigint, binary, integer, double, numeric)或字符串型(varchar, char, text)',
    },
    降维: {
      feature:
        '要求字段类型为数值型(smallint, bigint, binary, integer, double, numeric)',
      label: '',
    },
    聚类: {
      feature:
        '要求字段类型为数值型(smallint, bigint, binary, integer, double, numeric)',
      label: '',
    },
  }
  public modelTypeList: any = [
    {
      groupName: '回归',
      options: [
        { key: 'LR', value: '线性(Linear Regression)' },
        { key: 'AUTOR', value: '自动机器学习(Auto Regression)' },
      ],
    },
    {
      groupName: '分类',
      options: [
        { key: 'DTC', value: '决策树(Decision Tree Classification)' },
        { key: 'AUTOC', value: '自动机器学习(Auto Classification)' },
      ],
    },
    {
      groupName: '聚类',
      options: [{ key: 'KM', value: 'K均值(K-Means)' }],
    },
    {
      groupName: '降维',
      options: [{ key: 'PCA', value: '主成分分析(PCA)' }],
    },
  ]
  public regressionIntro: any = {
    'linear regression':
      'https://scikit-learn.org/stable/modules/linear_model.html#ordinary-least-squares',
    adaboost: 'https://scikit-learn.org/stable/modules/ensemble.html#adaboost',
    ard_regression:
      'https://scikit-learn.org/stable/modules/linear_model.html#automatic-relevance-determination-ard',
    decision_tree: 'https://scikit-learn.org/stable/modules/tree.html#tree',
    extra_trees:
      'https://scikit-learn.org/stable/modules/ensemble.html#extremely-randomized-trees',
    gaussian_process:
      'https://scikit-learn.org/stable/modules/gaussian_process.html#gaussian-process',
    sgd: 'https://scikit-learn.org/stable/modules/sgd',
    gradient_boosting:
      'https://scikit-learn.org/stable/modules/ensemble.html#gradient-boosting',
    k_nearest_neighbors:
      'https://scikit-learn.org/stable/modules/neighbors.html#nearest-neighbors-regression',
    linear_svr: 'https://scikit-learn.org/stable/modules/svm.html#regression',
    svm_svr: 'https://scikit-learn.org/stable/modules/svm.html#svm-regression',
    mlp: 'https://scikit-learn.org/stable/modules/linear_model.html#perceptron',
    random_forest:
      'https://scikit-learn.org/stable/modules/ensemble.html#forests-of-randomized-trees',
  }
  public classIntro: any = {
    'logistics regression':
      'https://scikit-learn.org/stable/modules/linear_model.html#logistic-regression',
    adaboost: 'https://scikit-learn.org/stable/modules/ensemble.html#adaboost',
    bernoulli_nb:
      'https://scikit-learn.org/stable/modules/naive_bayes.html#bernoulli-naive-bayes',
    decision_tree: 'https://scikit-learn.org/stable/modules/tree.html#tree',
    extra_trees:
      'https://scikit-learn.org/stable/modules/ensemble.html#extremely-randomized-trees',
    gaussian_nb:
      'https://scikit-learn.org/stable/modules/ensemble.html#extremely-randomized-trees',
    k_nearest_neighbors:
      'https://scikit-learn.org/stable/modules/generated/sklearn.neighbors.KNeighborsClassifier',
    lda: 'https://scikit-learn.org/stable/modules/lda_qda.html#lda-qda',
    linear_svc:
      'https://scikit-learn.org/stable/modules/svm.html#svm-classification',
    mlp: 'https://scikit-learn.org/stable/modules/linear_model.html#perceptron',
    multinomial_nb:
      'https://scikit-learn.org/stable/modules/naive_bayes.html#multinomial-naive-bayes',
    passive_aggressive:
      'https://scikit-learn.org/stable/modules/linear_model.html#passive-aggressive',
    qda: 'https://scikit-learn.org/stable/modules/lda_qda.html#lda-qda',
    random_forest:
      'https://scikit-learn.org/stable/modules/ensemble.html#forests-of-randomized-trees',
  }

  public created() {
    this.projectId = Number(this.$route.params.id)
    this.modelId = Number(this.$route.query.id)
    this.current =
      Number(this.$route.query.current) >= 0
        ? Number(this.$route.query.current)
        : 0
    if (this.$route.path.includes('create')) {
      this.queryModelById(this.modelId)
    }
    this.queryDataset()
    this.queryOperatorList()
  }

  public async queryOperatorList() {
    const response = await allOperatorList({
      data: { projectId: this.projectId },
    })
    if (response.data.code === 100) {
      this.collectionList = []
      this.collectionList.push({
        id: '我的模型',
        name: response.data.result.panel.slice(-1)[0].name,
      })
      response.data.result.panel.slice(-1)[0].items.forEach((element: any) => {
        if (element.isFolder) {
          this.collectionList.push({ id: element.id, name: element.name })
        }
      })
      DataViewStore.setOperatorList(response.data.result.panel)
    }
  }

  // public get collectionList() {
  //   const array = []
  //   array.push({
  //     id: '我的模型',
  //     name: DataViewStore.projectOperator?.slice(-1)[0]?.name,
  //   })
  //   DataViewStore.projectOperator
  //     ?.slice(-1)[0]
  //     ?.items?.forEach((element: any) => {
  //       if (element.isFolder) {
  //         array.push({ id: element.id, name: element.name })
  //       }
  //     })
  //   return array
  // }

  public async queryModelById(modelId: any) {
    modelId = modelId ?? this.modelData.id
    if (!modelId) {
      return
    }
    this.loading = true
    await queryModelById({
      // data: { projectId: this.projectId,id:this.pipelineId },
      data: { projectId: this.projectId, id: modelId, data: {} },
    })
      .then(async (response: any) => {
        this.loading = false
        if (response.data.code === 100) {
          this.modelData = response.data.result
          const { algorithm } = this.modelData
          DataViewStore.setSelectModel(this.modelData)
          // this.dataFm = this.dataFm.param
          this.dataFm.source = this.modelData.sourceTable ?? undefined
          if (
            this.dataFm.source !== null &&
            this.dataFm.source !== undefined &&
            this.dataFm.source !== ''
          ) {
            await this.queryDataset()
            this.sourceChange(this.dataFm.source)
          } else {
            this.columns = []
          }
          this.checkedList = this.modelData.param?.feature_col ?? []
          this.indeterminate = this.checkedList.length > 0
          if (
            algorithm === 'LR' ||
            algorithm === 'DTC' ||
            algorithm === 'AUTOR' ||
            algorithm === 'AUTOC'
          ) {
            this.label_col = this.modelData.param?.label_col ?? ''
          }

          switch (algorithm) {
            case 'LR': {
              // if (this.modelData.param?.label_col) {
              //   this.label_col = this.modelData.param?.label_col
              // }
              this.max_iter = this.modelData.param?.max_iter ?? 20
              this.reg_param = this.modelData.param?.reg_param ?? 0
              break
            }
            case 'DTC': {
              this.max_depth = this.modelData.param?.max_depth ?? 5
              // if (this.modelData.param?.label_col) {
              //   this.label_col = this.modelData.param?.label_col
              // }else{
              //   this.label_col = ''
              // }
              this.split_rate1 = this.modelData.param?.split_rate[0] ?? 0
              this.split_rate2 = this.modelData.param?.split_rate[1] ?? 1
              break
            }
            case 'KM': {
              this.k = this.modelData.param?.k ?? 2
              this.max_iter = this.modelData.param?.max_iter ?? 20
              this.model_type = this.modelData.param?.model_type ?? 'euclidean'
              break
            }
            case 'PCA': {
              this.k = this.modelData.param?.k ?? 1
              break
            }
            case 'AUTOR': {
              // if (this.modelData.param?.label_col) {
              //   this.label_col = this.modelData.param?.label_col
              // }
              this.split_rate1 = this.modelData.param?.split_rate[0] ?? 0
              this.split_rate2 = this.modelData.param?.split_rate[1] ?? 1
              this.timeout = this.modelData.param?.timeout ?? 60
              this.include = this.modelData.param?.include ?? []
              this.onChange(this.include, this.regressionArray, 2) // 初始化复选框
              break
            }
            case 'AUTOC': {
              // if (this.modelData.param?.label_col) {
              //   this.label_col = this.modelData.param?.label_col
              // }
              this.split_rate1 = this.modelData.param?.split_rate[0] ?? 0
              this.split_rate2 = this.modelData.param?.split_rate[1] ?? 1
              this.timeout = this.modelData.param?.timeout ?? 60
              this.include = this.modelData.param?.include ?? []
              this.onChange(this.include, this.classificationArray, 2) // 初始化复选框
              break
            }
            default:
              break
          }
        }
      })
      .catch(() => {
        this.loading = false
      })
  }

  public async queryDataset() {
    this.loading = true
    const response = await queryProjectDataset({
      // data: { projectId: this.projectId,id:this.pipelineId },
      data: { projectId: this.projectId },
    })
    this.loading = false
    if (response.data.code === 100) {
      // response.data.result.forEach((element:any) => {
      //   this.dataSets = this.dataSets.concat(element.dataset)
      // })
      this.dataSets = response.data.result
    }
  }

  public async createModel() {
    this.loading = true
    const response = await createModel({
      // data: { projectId: this.projectId,id:this.pipelineId },
      data: {
        modelType: this.modelData.modelType,
        algorithm: this.modelData.algorithm,
        projectId: this.projectId,
        name: this.modelData.name,
        modelDesc: this.modelData.modelDesc,
        data: {},
        param: {},
      },
    })
    this.loading = false
    if (response.data.code === 100) {
      this.modelData.id = response.data.result
      this.current += 1
      this.queryModelById(this.modelData.id)
      this.$message.success('创建成功！')
    } else {
      this.$message.error(response.data.message)
    }
  }

  public async updateModel() {
    this.loading = true
    const response = await updateModel({
      // data: { projectId: this.projectId,id:this.pipelineId },
      data: {
        id: this.modelData.id,
        modelType: this.modelData.modelType,
        algorithm: this.modelData.algorithm,
        projectId: this.projectId,
        name: this.modelData.name,
        modelDesc: this.modelData.modelDesc,
        data: this.modelData.data, // {},
        param: this.modelData.param, // {},
      },
    })
    this.loading = false
    if (response.data.code === 100) {
      this.current += 1
      this.queryModelById(this.modelData.id)
      // this.$message.success('修改成功！')
    } else {
      this.$message.error(response.data.message)
    }
  }

  public async saveModel() {
    if (!this.checkParameters()) {
      return
    }
    this.loading = true
    await updateModel({
      data: {
        id: this.modelData.id,
        modelType: this.modelData.modelType,
        algorithm: this.modelData.algorithm,
        projectId: this.projectId,
        name: this.modelData.name,
        modelDesc: this.modelData.modelDesc,
        sourceTable: this.indexTable.tableName,
        data: {},
        param: {
          feature_col: this.checkedList,
          // reg_param:this.dataFm.reg_param,
          // max_iter:this.dataFm.max_iter,
          ...this.dataFm,
        },
      },
    })
      .then(async (response: any) => {
        this.loading = false
        if (response.data.code === 100) {
          this.$message.success('保存成功！')
        } else {
          this.$message.error(response.data.message)
        }
      })
      .catch(() => {
        this.loading = false
      })
  }

  public checkParameters() {
    if (!this.indexTable.tableName) {
      this.$message.error('请选择训练数据！')
      return false
    }
    if (this.checkedList.length === 0) {
      this.$message.error('请选择特征列！')
      return false
    }
    if (this.modelData.algorithm === 'LR') {
      this.dataFm.reg_param = this.reg_param
      this.dataFm.max_iter = this.max_iter
      this.dataFm.label_col = this.label_col

      if (!this.dataFm.label_col) {
        this.$message.error('请选择目标列！')
        return false
      }
      if (!this.dataFm.reg_param && this.dataFm.reg_param !== 0) {
        this.$message.error('请填写正则参数！')
        return false
      }
      if (!this.dataFm.max_iter) {
        this.$message.error('请填写最大迭代数！')
        return false
      }
    } else if (this.modelData.algorithm === 'DTC') {
      this.dataFm.split_rate = [this.split_rate1, this.split_rate2]
      this.dataFm.max_depth = this.max_depth
      this.dataFm.label_col = this.label_col

      if (!this.dataFm.label_col) {
        this.$message.error('请选择目标列！')
        return false
      }
      if (!this.dataFm.max_depth) {
        this.$message.error('请填写树的最大深度！')
        return false
      }
    } else if (this.modelData.algorithm === 'KM') {
      this.dataFm.k = this.k
      this.dataFm.max_iter = this.max_iter
      this.dataFm.model_type = this.model_type
      if (!this.dataFm.k) {
        this.$message.error('请填写聚类维度！')
        return false
      }
      if (this.dataFm.k >= this.sourceCount) {
        this.$message.error('聚类维度需小于样本数量（数据行数）！', 4)
        return false
      }
      if (!this.dataFm.max_iter) {
        this.$message.error('请填写最大迭代数！')
        return false
      }
      if (!this.dataFm.model_type) {
        this.$message.error('请选择距离函数！')
        return false
      }
    } else if (this.modelData.algorithm === 'PCA') {
      this.dataFm.k = this.k
      if (!this.dataFm.k) {
        this.$message.error('请填写降维维度！')
        return false
      }
      if (this.dataFm.k > this.checkedList.length) {
        this.$message.error('降维维度不得大于所选特征列的个数！', 4)
        return false
      }
    } else if (
      this.modelData.algorithm === 'AUTOR' ||
      this.modelData.algorithm === 'AUTOC'
    ) {
      this.dataFm.timeout = this.timeout
      this.dataFm.include = this.include
      this.dataFm.label_col = this.label_col
      this.dataFm.split_rate = [this.split_rate1, this.split_rate2]
      if (!this.dataFm.label_col) {
        this.$message.error('请选择目标列！')
        return false
      }
      if (!Number.isInteger(this.timeout)) {
        this.$message.error('最大训练时长必须为整数且不小于30！')
        return false
      }
      if (this.include.length === 0) {
        this.$message.error('请选择仅采纳模型！')
        return false
      }
    }

    return true
  }

  public async startTrain() {
    if (!this.checkParameters()) {
      return
    }
    this.loading = true
    if (this.modelData.status === 'FINISHED') {
      this.modelData.status = 'PENDING'
    }

    await updateModel({
      data: {
        id: this.modelData.id,
        modelType: this.modelData.modelType,
        algorithm: this.modelData.algorithm,
        projectId: this.projectId,
        name: this.modelData.name,
        modelDesc: this.modelData.modelDesc,
        sourceTable: this.indexTable.tableName,
        data: {},
        param: {
          feature_col: this.checkedList,
          // reg_param:this.dataFm.reg_param,
          // max_iter:this.dataFm.max_iter,
          ...this.dataFm,
        },
      },
    })
      .then(async (response: any) => {
        if (response.data.code === 100) {
          trainModel({
            data: {
              id: this.modelData.id,
            },
          })
            .then(async () => {
              this.loading = false
              if (response.data.code === 100) {
                this.$message.success('开始训练成功！')
                // await this.queryModelById(this.modelData.id)
                this.current += 1
                this.$router.push(
                  `${this.$route.path}?id=${this.modelData.id}&current=${this.current}`
                )
              } else {
                this.$message.error(response.data.message)
              }
            })
            .catch(() => {
              this.loading = false
            })
          // this.current += 1
          // this.$router.push(
          //   `${this.$route.path}?id=${this.modelData.id}&current=${this.current}`
          // )
        }
      })
      .catch(() => {
        this.loading = false
      })
  }

  public reStartTrain() {
    this.$router.push(`create?id=${this.modelData.id}&current=1`)
    this.current = 1
  }

  public async cancelTrain() {
    // this.current += 1
    this.loading = true
    const response = await killTraining({
      data: {
        id: this.modelData.id,
        projectId: this.projectId,
      },
    })
    // this.$message.success('取消训练成功！')
    // this.backList()
    this.loading = false
    if (response.data.code === 100) {
      // this.current += 1
      this.$message.success('取消训练成功！')
      this.backList()
    } else {
      this.$message.error(response.data.message)
    }
  }

  public async queryOutputById() {
    this.tableLoading = true
    const response = await queryOutputById({
      data: {
        projectId: this.projectId,
        id: this.modelData.id ?? this.modelId,
      },
    })
    this.tableLoading = false
    if (response.data.code === 100) {
      this.outputColumns = []
      response.data?.result?.head.forEach((element: any) => {
        this.outputColumns.push({
          title: element.name,
          key: element.name,
          dataIndex: element.name,
        })
      })
      this.outputData = response.data.result.data
    } else {
      this.$message.error(response.data.message)
    }
  }

  // feature  table select by column
  public featureCheck(name: any) {
    if (this.checkedList.includes(name)) {
      this.checkedList.splice(
        this.checkedList.findIndex((item: any) => {
          return item === name
        }),
        1
      )
    } else {
      this.checkedList.push(name)
    }
  }

  // 功能描述字数上限提示
  public textAreaChange() {
    if (this.modelData.modelDesc.length === 300) {
      this.$message.info('功能描述字数限制为300！')
    }
  }

  // 训练状态变化
  public trainStatusChanged(status: any) {
    this.isFinished = status === 'FINISHED'
    this.queryModelById(this.modelData.id)
  }

  public viewConfig() {
    this.$router.push(
      this.$route.path.replace(
        /create/,
        `config?id=${this.modelData.id}&type=create`
      ) // chuan table id
    )
  }

  public exportData() {
    this.exportVisible = true
  }

  public async handleConfirm() {
    if (!this.modelForm.id) {
      this.$message.error('请选择文件夹！')
      return
    }
    let FOLDER_ID = this.modelForm.id
    if (this.modelForm.id === '我的模型') {
      FOLDER_ID = ''
    }
    const response = await exportToFolder({
      data: {
        projectId: this.projectId,
        id: this.modelData.id,
        folderId: FOLDER_ID,
        name: this.modelForm.name,
        modelDesc: this.modelForm.modelDesc,
      },
    })
    this.exportVisible = false
    this.modelForm = {}
    if (response.data.code === 100) {
      this.$message.success('导出成功！')
    }
  }

  public next() {
    if (!this.modelData.modelType) {
      this.$message.error('请选择模型类别！')
      return
    }
    if (!this.modelData.name) {
      this.$message.error('请输入模型名称！')
      return
    }
    // else if (!this.modelData.modelDesc){
    //   this.$message.error('请输入功能描述！')
    // }
    if (this.modelData?.id) {
      this.updateModel()
    } else {
      this.createModel()
    }
  }

  public prev() {
    this.current -= 1
  }

  public backList() {
    if (this.$route.path.includes('create')) {
      this.$router.push(this.$route.path.replace(/create/, 'trainning'))
    } else {
      this.$emit('toggle-list')
    }
  }

  public filterModelType(type: any) {
    switch (type) {
      case 'LR':
        return '线性回归'
      case 'DTC':
        return '决策树'
      case 'KM':
        return 'K均值'
      case 'PCA':
        return '主成分分析'
      case 'AUTOC':
        return '分类自动机器学习'
      case 'AUTOR':
        return '回归自动机器学习'
      default:
        return ''
    }
  }

  public onValueChange(key: any, value: any) {
    this.dataFm[key] = value
  }

  public onCheckAllChange(ee: any) {
    Object.assign(this, {
      checkedList: ee.target.checked ? this.plainOptions : [],
      indeterminate: false,
      checkAll: ee.target.checked,
    })
  }

  public onCheckAllChange2(ee: any) {
    Object.assign(this, {
      include: ee.target.checked ? this.regressionArray : [],
      indeterminate2: false,
      checkAll2: ee.target.checked,
    })
  }

  public onCheckAllChange3(ee: any) {
    Object.assign(this, {
      include: ee.target.checked ? this.classificationArray : [],
      indeterminate2: false,
      checkAll2: ee.target.checked,
    })
  }

  public onChange(checkedList: any, list: any, type: any) {
    if (type === 2) {
      this.indeterminate2 =
        !!checkedList.length && checkedList.length < list.length
      this.checkAll2 = checkedList.length === list.length
    } else {
      this.indeterminate =
        !!checkedList.length && checkedList.length < list.length
      this.checkAll = checkedList.length === list.length
    }
  }

  // 切换数据源
  public async sourceChange(value: any) {
    // 清空选中特征列及目标列
    this.label_col = ''
    this.checkedList = []

    let array: any = []
    this.dataSets.forEach((element: any) => {
      array = array.concat(element.dataset)
    })
    this.indexTable = array.find((source: any) => {
      return source.tableName === value
    })
    this.featureTableLoading = true
    const response = await querySource({
      data: { datasetId: this.indexTable?.id, projectId: this.projectId },
    })
    this.featureTableLoading = false
    if (response.data.code === 100) {
      // this.souceData = response.data.result
      // {title: '模型名称',
      // key: 'name',
      // dataIndex: 'name',
      // slots: { title: 'customTitle' },
      this.sourceCount = Number(response.data.result.count)
      this.columns = []
      // response.data?.result?.head.forEach((element: any) => {
      //   this.columns.push({
      //     title: element.name,
      //     key: element.name,
      //     dataIndex: element.name,
      //     slots: { title: 'customTitle' },
      //   })
      // })
      // this.heads = response.data?.result?.head?.map((element: any) => {
      //   return element.name
      // })
      this.heads = response.data?.result?.head
      this.columns = response.data?.result?.head?.map((element: any) => {
        return { ...element, checked: false }
      })
      this.souceData = response.data?.result?.data
      this.plainOptions = []
      this.columns.forEach((element: { name: any }) => {
        this.plainOptions.push(element.name)
      })
      this.onChange(this.checkedList, this.plainOptions, 1) // 初始化复选框
    }
  }

  public spiltRateChange(value: any) {
    if (value === 1) {
      if (isNumber(this.split_rate1)) {
        this.split_rate2 = 1 - this.split_rate1
      } else {
        this.$message.error('输入不合法！请重新输入')
        this.split_rate1 = 0
      }
    } else if (value === 2) {
      if (isNumber(this.split_rate2)) {
        this.split_rate1 = 1 - this.split_rate2
      } else {
        this.$message.error('输入不合法！请重新输入')
        this.split_rate2 = 0
      }
    }
  }

  // graph ID
  public getGraphId(): number {
    return Number.parseInt(localStorage.getItem('graphId') || '0', 10)
  }

  public handleChange(value: any) {
    switch (value) {
      case 'LR': {
        this.modelData.modelType = '回归'
        break
      }
      case 'DTC': {
        this.modelData.modelType = '分类'
        break
      }
      case 'KM': {
        this.modelData.modelType = '聚类'
        break
      }
      case 'PCA': {
        this.modelData.modelType = '降维'
        break
      }
      case 'AUTOR': {
        this.modelData.modelType = '回归'
        break
      }
      case 'AUTOC': {
        this.modelData.modelType = '分类'
        break
      }
      default:
        break
    }
  }

  public closeGraphPanel() {
    this.$router.push({ name: '数据视图' })
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/model';

.main-content {
  background: #fff;

  .space {
    padding: 24px 216px;
  }

  .space1 {
    padding: 24px 0;
  }

  .steps-content {
    margin-top: 16px;
    min-height: 200px;
    padding-top: 39px;
  }

  .steps-action {
    margin-top: 24px;

    .btn-left {
      margin-left: 8px;
    }

    .btn-center {
      display: flex;
      justify-content: center;
    }
  }

  .settings {
    padding: 0 40px;
    width: calc(100vw - 48px);

    .form-content {
      padding-left: 12px;
    }

    .table-content {
      margin-top: 12px;
      max-height: 400px;
      max-width: 100%;

      .m_table {
        border-collapse: collapse;
        border-color: #e8e8e8;
        line-height: 36px;
        text-align: center;
        width: 100%;

        th {
          background: #fafafa;
        }
      }

      .m_table tr th,
      .m_table tr td {
        border: 1px solid #e8e8e8;
        max-width: 300px;
        overflow: hidden;
        padding: 5px 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .trainning {
    margin-top: -31px;
    padding: 0 24px;

    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .row {
      padding: 4px 0;
    }

    .radio {
      margin-top: 28px;
    }

    .empty-img {
      padding: 160px 0;
    }

    .content {
      padding: 24px 0 0;

      .result {
        display: flex;
        height: 222px;
        margin-bottom: 22px;
      }
    }
  }
}

.m_checkbox {
  background-color: #fafafa;
  border-radius: 4px;
  padding: 0 8px;
  width: 100%;

  .checkbox {
    padding-right: 25px;
    white-space: nowrap;
    width: 100%;
  }
}

.m_radiobox {
  background-color: #fafafa;
  border-radius: 4px;
  padding: 8px;
  width: 100%;

  .radio {
    padding-right: 25px;
    width: 100%;
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// .m_title {
//   align-items: center;
//   display: flex;
//   margin-bottom: 22px;

//   b {
//     font-size: 16px;
//   }
// }

// .divider2 {
//   background-color: rgba(93, 99, 126, 0.45);
//   height: 18px;
//   margin-right: 8px;
//   width: 1px;
// }

// .close {
//   color: #fff;
//   cursor: pointer;
//   font-size: 20px;
//   line-height: 64px;
//   position: fixed;
//   right: 20px;
//   top: -2px;
// }
</style>
